Zendesk のリクエスト画面のコメント欄にテンプレートを埋め込む

Zendesk Guide で script.js を編集して、リクエスト画面のコメント欄に、評価用のテンプレートを埋め込んでみました。

#Zendesk

#Zendesk Guide

Takaaki Kakei

2022.11.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは、筧( @TakaakiKakei )です。

サポートの対応品質改善を目的に、お客様がエージェントの対応ごとに満足度を評価できる仕組みを検討しています。簡単に実現する方法として、リクエスト画面のコメント欄に、評価用のテンプレートを埋め込む方法を考えました。今回はその方法についてご紹介します。

やってみた

新規テーマの追加

まっさらな状態のテーマにカスタマイズをしていきたので、新規のテーマを追加します。

Zendesk Guide のテーマ画面を開きます。

テーマを追加 -> Copenhagen テーマを追加 をクリックします。

作成されたテーマに適当な名前をつけます。

現在の設定を確認

一旦、現行の設定を確認してみましょう。

カスタマイズ をクリックします。

コードを編集 をクリックします。

コードにアクセス をクリックします。

プレビュー をクリックします。

プレビューロールでエンドユーザーを選択します。

テンプレートでリクエストページを選択します。

リクエストページの画面下部の 会話に追加 をクリックします。

返信欄には特に何も書かれていません。

テンプレートのカスタマイズ

では、リクエスト画面のコメント欄に、評価用のテンプレートを埋め込む設定をします。コードの編集画面に戻ります。編集が必要なファイルを左袖のファイル群で開きます。

document_head.hbs

document_head.hbs の末尾に以下のコードを追加します。これによって、jquery が利用可能になります。

jQueryのインポートとアップグレード – Zendeskヘルプ

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" 
crossorigin="anonymous" async></script>

request_page.hbs

request_page.hbs はリクエストページに紐づくファイルです。 request_page.hbs の末尾に以下のコードを追加します。 templateName を追加しておくことで、リクエストページが開かれたときの識別子にします。

<!-- ここから -->
<script>
  let templateName = "request";
</script>
<!-- ここまで -->

script.js

script.js にテンプレートを挿入するロジックを書きます。 script.js の以下の箇所にコードを追加します。 script.js の内の下部に以下のコードを追加します。

document.addEventListener('DOMContentLoaded', function() {
// snip
  if (templateName = 'request'){
    // 言語取得
    let locale = HelpCenter.user.locale;
    const templateRateJa = `<br><br><br>
    == 評価欄 ==<br>
    直近の担当者の対応は適切でしたでしょうか？<br>
    よろしければこちらにご評価ください。<br>
    評価(1:不満足 2:満足）:`
    const templateRateEn = `<br><br><br><br>
    == Rating column ==<br>
    Was Recent response helpful? Please rate on a scale of 2.<br>
    Rate(1:Unsatisfied 2:Satisfied):`
    $(function(){
      // 返信欄に満足度評価のテンプレート追加
      if (locale === 'ja'){
        $('#request_comment_body').val(templateRateJa)
      } else {
        $('#request_comment_body').val(templateRateEn)
      }
    });
  }
});